<template>
  <el-container direction="vertical">
    <el-row>
      <!--表单插件-->
      <el-col :span="4">
        <el-input
          placeholder="请输入物资ID和用户ID"
          v-model="keywords"
          style="width: 100%"
          @keyup.native.enter="getGoodsUseRecordList"
          clearable
          prefix-icon="el-icon-search"
        >
        </el-input>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="getGoodsUseRecordList">查询</el-button>
      </el-col>
    </el-row>
    <el-row>
      <!--表格插件-->
      <!--表格绑定goodsUseRecordList数据-->
      <el-table
        :data="goodsUseRecordList"
        style="width: 100%"
        stripe
      >
        <!--表格中的单独一列-->
        <el-table-column
          prop="id"
          label="ID"
          width="100">
        </el-table-column>
        <el-table-column
          prop="userId"
          label="用户ID"
          width="100">
        </el-table-column>
        <el-table-column
          prop="userName"
          label="使用人"
          width="180">
        </el-table-column>
        <el-table-column
          prop="goodsId"
          label="物资ID"
          width="100">
        </el-table-column>
        <el-table-column
          prop="goodsName"
          label="物资"
          width="180">
        </el-table-column>
        <el-table-column
          prop="quantity"
          label="数量"
          width="150">
          <template slot-scope="scope">
            <el-tag :type="scope.row.quantity > 0 ? 'primary' : 'success'">{{scope.row.quantity > 0 ? '+' + scope.row.quantity : scope.row.quantity }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="date"
          label="操作时间"
          width="250">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              size="mini"
              @click="handleDelete(scope.$index,scope.row)">
            </el-button>
          </template>
      </el-table-column>
    </el-table>
  </el-row>
    <el-row>
      <!--分页插件-->
      <el-pagination
        background
        @current-change="currentChange"
        layout="prev, pager, next"
        :total="totalPage">
      </el-pagination>
    </el-row>
  </el-container>
</template>

<script>
  import Qs from 'qs'
  export default {
    name: "GoodsUseRecordPage",
    data(){
      return{
        user: {},
        goodsUseRecordList:[],
        currentPage:1,
        pageSize: 10,
        totalCount:0,
        totalPage:0,
        keywords: ''
      }
    },
    computed: {
      search() {
        return this.keywords;
      }
    },
    watch: {
      search(newValue, oldValue) {
        if (newValue === "") {
          //如果为空，执行方法获取list
          this.getGoodsUseRecordList();
        }
      }
    },
    methods:{
      /*获取物资记录*/
      getGoodsUseRecordList(){
        this.$http.get('/goodsUseRecord/query',{
          params:{
            pageSize:this.pageSize,
            currentPage:this.currentPage,
            keywords: this.keywords
          }
        }).then((response)=>{
          if(response.status === 200){
            if(response.data.code === 10000){
              this.totalCount = response.data.data.totalCount;
              this.totalPage = response.data.data.totalPage * 10;
              this.goodsUseRecordList = response.data.data.data;
              console.log(response.data.data.data);
            }else{
              this.goodsUseRecordList = [];
              this.$notify.error({
                title: '错误',
                message: response.data.msg,
                duration: 1000
              });
            }
          }else{
            this.$notify.error({
              title: '错误',
              message: response.status + response.statusText,
              duration: 1000
            });
          }
        })
      },
      /*分页*/
      currentChange(pageNo){
        this.currentChange = pageNo;
        this.getGoodsUseRecordList();
      },
      /*删除订单*/
      handleDelete(index,row){
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = Qs.stringify({
            id:row.id
          })
          this.$http.post('/goodsUseRecord/del',params).then((response)=>{
            if(response.status === 200){ // 先判断状态码
              if(response.data.code === 10000){ // 再判断结果码
                this.$notify({
                  title: '成功',
                  message: response.data.data,
                  type:'success',
                  duration: 1000
                });
                this.getGoodsUseRecordList();
              }else{
                this.$notify.error({
                  title: '错误',
                  message: response.data.msg,
                  duration: 1000
                });
              }
            }else{
              this.$notify.error({
                title: '错误',
                message: response.status + response.statusText
              });
            }
          })
        });
      }
    },
    /*Vue的钩子函数：created 创建完成 可以获取this ajax加载 开启定时器*/
    created() {
      /*从sessionStorage获取用户登录的信息*/
      let userStr = sessionStorage.getItem('user') || '{}';
      this.user = JSON.parse(userStr);
      /*在页面加载时就获取用户信息*/
      this.getGoodsUseRecordList();
    }
  }
</script>

<style scoped>
.el-row{
  margin-bottom: 15px;
}
</style>
